<template>
	<view class="activity">
		<comHead :isLeft="true" :isRight="false"></comHead>
		<view class="videoImg">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item class="swiper-item">
					<image :src="getImg(detail.image)" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="ms">
			<!-- #ifdef H5 -->
			<view class="share">
				<image @click="messageFun('share')" src="https://siha.vxmeng.com/static/more/share.png" mode="widthFix"></image>
				<text>{{$t('sjzx.fx')}}</text>
			</view>
			<!-- #endif -->
			<!-- #ifndef H5 -->
			<button class="share" open-type="share">
				<image src="https://siha.vxmeng.com/static/more/share.png" mode="widthFix"></image>
				<text>{{$t('sjzx.fx')}}</text>
			</button>
			<!-- #endif -->
			
			<view class="tit">
				<text>{{detail.name}}</text>
			</view>
			<view class="text">
				<text>{{$t('gdjj.jqjj')}}：</text>
			</view>
			<view class="text">
				<text>{{detail.blurb}}</text>
			</view>

			<view class="jdBox">
				<view class="t">
					<view class="l">
						<text>{{$t('gdjj.hs')}}</text>
						<text class="num" v-for="(item,index) in (detail.end_time+'')">{{item}}</text>
						<text>{{$t('gdjj.t')}}</text>
					</view>
					<view class="r" @click="comLink('/pages/index/rankSidou?episode_script_id='+detail.id)">
						<image src="https://siha.vxmeng.com/static/index/d1.png" mode="widthFix"></image>
						<text>{{$t('gdjj.topbd')}}</text>
					</view>
				</view>
				<view class="m">
					<view class="l" :style="{width:((((detail.yes_money/detail.money*100)).toFixed(2)-2)+'%')}">
						<!-- <image src="https://siha.vxmeng.com/static/more/l.png" mode=""></image> -->
						<text>{{((detail.yes_money/detail.money*100)).toFixed(2)}}%</text>
					</view>
					<view class="r" :style="{width:((100 - ((detail.yes_money/detail.money*100)).toFixed(2))+'%')}">
						<!-- <image src="https://siha.vxmeng.com/static/more/r.png" mode=""></image> -->
					</view>
				</view>
				<view class="b">
					<text>{{$t('gdjj.yy')}} {{detail.vote_member_num}} {{$t('gdjj.rtp')}}</text>
					<text>{{$t('gdjj.hy')}} {{detail.money - detail.yes_money}} {{$t('gdjj.sdjmgl')}}</text>
				</view>
			</view>

			<view class="tit">
				<text>{{$t('gdjj.rslzynsls')}}</text>
				<view class="btn" @click="comLink('/pages/more/createActor?episode_script_id='+id+'&dou_num='+detail.dou_num)">
					<image src="https://siha.vxmeng.com/static/more/camera.png" mode="widthFix"></image>
					<text>{{$t('gdjj.scnxydzyjb')}}</text>
				</view>
			</view>

			<view class="list">
				<view class="item" v-for="(item,index) in EpisodeCharacter">
					<image :src="getImg(item.image)" mode="aspectFill"></image>
					<view class="box">
						<view class="l">
							<text>{{item.name}}</text>
							<image v-if="item.gender==2" src="https://siha.vxmeng.com/static/more/nv.png" mode="widthFix"></image>
							<image v-else src="https://siha.vxmeng.com/static/more/nan.png" mode="widthFix"></image>
							<!-- <text>（{{item.company}}）</text> -->
						</view>
						<view class="r">
							<text>{{item.num}} {{$t('gdjj.rd')}}</text>
							<image v-if="Number(item.num) > 100000" src="https://siha.vxmeng.com/static/more/hot.png" mode="widthFix"></image>
							<text @click="onVote(item.id)">{{$t('gdjj.r')}} {{item.gender == 2?$t('gdjj.womanta'):$t('gdjj.manta')}} {{$t('gdjj.y')}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="zcPop" v-if="isPop">
			<view class="zcBox">
				<image src="https://siha.vxmeng.com/static/more/zcPop.png" mode="widthFix"></image>
				<view class="content">
					<text class="t">{{$t('gdjj.hynlhzzr')}}</text>
					<text class="m">{{$t('gdjj.bctpxxh')}}{{detail.dan_money}}{{$t('gdjj.sdsftp')}}</text>
				</view>
				<view class="btns">
					<view class="btn" @click="isPop=false">{{$t('gdjj.wzxx')}}</view>
					<view class="btn" @click="doAddEpisodeCharacterVote">{{$t('gdjj.mstp')}}</view>
				</view>
			</view>
		</view>
		
<!-- 		<button class="share" open-type="share">
			<image src="https://siha.vxmeng.com/static/more/share.png" mode="widthFix"></image>
			<text>分享</text>
		</button> -->
		<comPay v-if="isPay" @hidePay="hidePay"></comPay>
		<!-- #ifdef MP-WEIXIN || MP-TOUTIAO || MP-ALIPAY -->
			<comLack v-if="isLack" @hide="hideLack" value="10000"></comLack>
		<!-- #endif -->
		<comReward v-if="isObtain"></comReward>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isPop: false,
				actor: '',
				isPay: false,
				isLack: false,
				isObtain: false,
				userinfo: {},
				detail: {},
				EpisodeCharacter: [],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				id: ''
			}
		},
		onLoad(options) {
			this.id = options.id
			this.getEpisodeDetail()
			this.getUserinfo()
			this.getEpisodeCharacter()
		},
		onShow() {
			if(this.$tools.getStore('share_dou')){
				this.$music.play_obtain();
				this.isObtain = true;
				clearTimeout(this.timer);
				this.timer = setTimeout(()=>{
					this.isObtain = false;
					// this.userinfo.money = Number(this.changeAmount) + Number(this.userinfo.money);
				}, 1500);
				this.$tools.setStore('share_dou', false)
			}
		},
		// onShareAppMessage() {
		// 	return {
		// 		title: '嘶哈嘶哈', //分享的名称
		// 		path: '/pages/index/index',
		// 		//页面的路径
		// 		imageUrl: 'https://siha.vxmeng.com/static/logo.png'
		// 	}
		// },
		// //分享到朋友圈
		// onShareTimeline() {
		// 	return {
		// 		title: '嘶哈嘶哈',
		// 		path: '/pages/index/index',
		// 		imageUrl: 'https://siha.vxmeng.com/static/logo.png'
		// 	}
		// },
		methods: {
			hideLack(){
				this.isLack = false
			},
			hidePay(e){
				this.isPay=false
				if(e == 1){
					this.isLack = true
				}else{
					this.getUserinfo()
				}
			},
			onVote(id){
				this.isPop = true;
				this.actor = id;
			},
			async doAddEpisodeCharacterVote(){
				const res = await this.$myRequest({
					url: 'api/episode/doAddEpisodeCharacterVote',
					data: {
						episode_character_id: this.actor
					}
				})
				this.isPop = false;
				if (res.code == 1) {
					console.log(res)
					this.$tools.showTx(res.msg)
					this.getEpisodeDetail()
					this.getEpisodeCharacter()
				}else if(res.code==999){
					this.isPay = true
				}
			},
			async getEpisodeCharacter() {
				const res = await this.$myRequest({
					url: 'api/episode/getEpisodeCharacter',
					data: {
						episode_script_id: this.id,
						status: 2
					}
				})
				if (res.code == 1) {
					console.log(res)
					this.EpisodeCharacter = res.data.list
				}
			},
			async getUserinfo() {
				const res = await this.$myRequest({
					url: 'api/user/index',
					data: {}
				})
				if (res.code == 1) {
					console.log(res)
					this.userinfo = res.data
				}
			},
			async getEpisodeDetail() {
				const res = await this.$myRequest({
					url: 'api/episode/getEpisodeDetail',
					data: {
						episode_script_id: this.id
					}
				})
				if (res.code == 1) {
					console.log(res)
					this.detail = res.data
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.activity {
		width: 100%;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		position: relative;
		background-color: rgb(13, 10, 31);
		// align-items: center;
		.videoImg {
			width: 100%;
			height: 562rpx;
			position: absolute;
			top: 0;
			left: 0;

			.swiper {
				width: 100%;
				height: 562rpx;
			}

			.swiper-item {
				width: 750rpx;
				height: 562rpx;
				position: relative;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.ms {
			position: absolute;
			top: 562rpx;
			left: 0;
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;
			// height: calc(100vh - 766rpx);
			// overflow: auto;
			.share{
				position: absolute;
				right: 30rpx;
				top: 30rpx;
				display: flex;
				align-items: center;
				margin: 0;
				border: none;
				flex-direction: column;
				color: #fff;
				font-size: 26rpx;
				image {
					width: 44rpx;
				}
				&::after{
					border: none;
				}
			}

			.tit {
				font-size: 32rpx;
				color: #fff;
				margin-top: 40rpx;

				button {
					display: flex;
					align-items: center;
					margin: 0;
				}

				text {
					&:nth-child(1) {
						width: 70%;
					}

					&:nth-child(2) {
						color: #FFD673;
						font-size: 40rpx;
					}
				}

				image {
					width: 44rpx;
				}
				.btn{
					width: 684rpx;
					height: 76rpx;
					margin-top: 20rpx;
					border-radius: 38rpx;
					background: linear-gradient(275deg, #62B6FC 0%, #5F58FD 78%, #5F58FD 99%);
					display: flex;
					justify-content: center;
					align-items: center;
					image{
						width: 34rpx;
					}
					text{
						font-size: 28rpx;
					}
				}
			}

			.text {
				color: #D8D8D8;
				font-size: 24rpx;
				margin-top: 20rpx;
				line-height: 1.5;
			}

			.jdBox {
				display: flex;
				flex-direction: column;
				font-size: 24rpx;
				color: #fff;
				margin-top: 20rpx;

				.t {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.l {
						display: flex;
						align-items: center;

						text {
							margin-right: 10rpx;

							&.num {
								display: inline-flex;
								align-items: center;
								justify-content: center;
								width: 36rpx;
								height: 48rpx;
								border-radius: 4rpx;
								background: linear-gradient(180deg, #5696DD 0%, #6524B7 100%);
							}
						}
					}

					.r {
						display: flex;
						align-items: center;
						justify-content: center;

						image {
							width: 50rpx;
							margin-right: 10rpx;
						}
					}
				}

				.m {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin: 30rpx 0;

					image {
						width: 100%;
						height: 48rpx;
					}

					.l {
						transform: skewX(-34deg);
						position: relative;
						background: linear-gradient(270deg, #578EDA 4%, #6428B8 101%);
						height: 48rpx;
						z-index: 1;
						text {
							position: absolute;
							left: 0;
							top: 0;
							min-width: 100rpx;
							width: 100%;
							height: 100%;
							display: inline-flex;
							align-items: center;
							justify-content: center;
							transform: skewX(34deg);
						}
					}
					.r{
						transform: skewX(-34deg);
						background: #0B2245;
						height: 48rpx;
					}
				}

				.b {
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
			}

			.list {
				display: flex;
				flex-direction: column;
				width: 100%;
				padding-bottom: 50rpx;
				.item {
					border-radius: 30rpx;
					margin-top: 30rpx;
					overflow: hidden;
					position: relative;

					>image {
						width: 100%;
						height: 300rpx;
						background: linear-gradient(270deg, #578EDA 4%, #6428B8 101%);
					}

					.box {
						position: absolute;
						bottom: 0;
						left: 0;
						background: rgba(217, 217, 217, 0.7);
						backdrop-filter: blur(8rpx);
						border-radius: 0px 0px 24rpx 24rpx;
						width: 100%;
						height: 80rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 0 30rpx;
						box-sizing: border-box;
						font-size: 24rpx;

						image {
							width: 25rpx;
						}

						.l {
							display: flex;
							align-items: center;
							justify-content: center;

							image {
								margin: 0 10rpx;
							}
						}

						.r {
							display: flex;
							align-items: center;
							justify-content: center;

							image {
								margin-left: 10rpx;
							}

							text {
								margin-left: 10rpx;
								&:last-child {
									display: inline-flex;
									// width: 112rpx;
									padding: 0 10rpx;
									height: 40rpx;
									align-items: center;
									justify-content: center;
									border-radius: 46rpx;
									background: linear-gradient(270deg, #5C80EF 3%, #B82DFC 99%);
									color: #fff;
								}
							}
						}
					}
				}
			}
		}
		
		.zcPop{
			position: fixed;
			top: 0;
			left: 0;
			z-index: 1;
			width: 100vw;
			height: 100vh;
			background-color: rgba(0, 0, 0, .8);
			display: flex;
			align-items: center;
			justify-content: center;
			.zcBox{
				width: 680rpx;
				height: 400rpx;
				position: relative;
				&>image{
					width: 100%;
					height: 100%;
					position: absolute;
					left: 0;
					bottom: 0;
					z-index: -1;
				}
				.content{
					display: flex;
					flex-direction: column;
					align-items: center;
					line-height: 50rpx;
					color: #2A0970;
					text{
						padding: 0 30rpx;
						&:first-child{
							margin-top: 80rpx;
						}
					}
				}
				.btns{
					width: 100%;
					display: flex;
					justify-content: space-between;
					position: absolute;
					bottom: 50rpx;
					left: 0;
					padding: 0 50rpx;
					font-size: 36rpx;
					.btn{
						width: 250rpx;
						height: 64rpx;
						border-radius: 32rpx;
						border: 2rpx solid #5696DD;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #497BFB;
						
						&:last-child{
							color: #fff;
							border: none;
							background: linear-gradient(180deg, rgba(135, 80, 240, 1) 0%, rgba(100, 160, 255, 1) 99%);
						}
					}
				}
			}
		}
	}
</style>